<!--
 * @Date: 2024-09-05 15:41:57
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-11 10:38:13
 * @Description: 表格复选框配置
-->
<template>
  <div class="widget-config-setting">
    <div class="setting-name">选框配置</div>
    <div class="setting-body">
      <el-form-item label="是否启用">
        <el-switch v-model="boxConfig.enabled"></el-switch>
      </el-form-item>
      <template v-if="boxConfig.enabled">
        <el-form-item label="选框类型">
          <el-select
            v-model="boxConfig.mode"
          >
            <el-option
              v-for="item in boxOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="固定位置">
          <el-select clearable
            v-model="boxConfig.fixed"
          >
            <el-option
              v-for="item in fixedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </div>
  </div>
</template>

<script setup name="boxConfig-editor">
import { reactive, computed } from 'vue';

const props = defineProps({
  // 设计器信息
  designer: { type: Object },
  // 组件选项信息
  optionModel: { type: Object },
  // 当前选中的组件
  selectedWidget: { type: Object },
});

// 默认配置
const defConfig = {
  mode: 'checkbox',
  fixed: '',
  enabled: false,
}
// 表格的配置
const boxConfig = computed(() => {
  if (!props.optionModel.boxConfig) {
    props.optionModel.boxConfig = defConfig
  }
  return props.optionModel.boxConfig
})

// 选框类型
const boxOptions = reactive([
  { label: '单选框', value: 'radio' },
  { label: '多选框', value: 'checkbox' },
])

// 固定位置选项
const fixedOptions = reactive([
  { label: '左侧', value: 'left' },
  { label: '右侧', value: 'right' },
])

</script>

<style lang="scss" scoped>
</style>
